<template>
	<view>
		<van-cell-group title="课程信息">
			<van-field placeholder="请输入课程名称" label="课名" :value="courseName" @change="changeCourseName" required />
			<van-field placeholder="请输入教室" label="教室" :value="classroom" @change="changeClassroom" required />
			<van-field placeholder="请输入老师" label="老师" :value="teacher" @change="changeTeacher" required />
			<!-- 	<van-field placeholder="请输入周数" label="周数" :value="week" @change="changeWeek" />
			<van-field placeholder="请输入节数" label="节数" :value="unit" @change="changeUnit" /> -->
		</van-cell-group>
		<van-cell-group title="设置时间">
			<van-cell title="周数" is-link @click="popWeek" />
			<!--弹出层选择周数-->
			<van-popup :show="showWeek" @close="onCloseWeek" round position="bottom" custom-style="height: 46%">
				<van-checkbox-group :value="weeks" @change="changeWeeks">
					<van-grid :column-num="5" :clickable="true" :border="false">
						<van-grid-item v-for="value in 25" :key="value" custom-class="weekNum" use-slot>
							<van-checkbox :value="isChecked" @change="chooseWeek" :name="value+1">
								{{value+1}}
							</van-checkbox>
						</van-grid-item>
					</van-grid>
				</van-checkbox-group>
			</van-popup>
			<van-field :value='day' label="周" readonly />
			<van-field :value='jieshu' label="节数" readonly />
		</van-cell-group>
		<div class="add">
			<van-button type="primary" block round color="#006600" :disabled="isNull" @click="addClass">
				添加
			</van-button>
		</div>
		<van-notify id="van-notify" />
	</view>
</template>

<script>
	import Notify from '../../wxcomponents/vant/dist/notify/notify'
	export default {
		data() {
			return {
				courseName: "",
				classroom: "",
				teacher: "",
				weeks: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17',
					'18', '19', '20', '21', '22', '23', '24', '25'
				],
				_weeks: [],
				showWeek: false,
				isChecked: true,
				unit: null,
				day: null,
				jieshu: null,
				isNull: true
			}
		},
		mounted() {
			uni.$on('update',
				(res) => {
					this.unit = res.msg
				})
			uni.$emit('send')
			if (this.unit !== null) {
				this.day = (this.unit) % 7 + 1
				this.jieshu = parseInt((this.unit) / 7) + 1
			} else {
				Notify({
					type: 'danger',
					message: '参数错误'
				});
			}
			this._weeks = this.weeks.map(Number)
		},
		beforeDestroy() {
			uni.$off('update')
			uni.$off('send')
		},
		methods: {
			checkNull() {
				if (this.courseName !== "" && this.classroom !== "" && this.teacher !== "" && this.weeks.length != 0) {
					this.isNull = false
				} else {
					this.isNull = true
				}
			},
			changeCourseName(e) {
				this.courseName = e.detail
				this.checkNull()
			},
			changeClassroom(e) {
				this.classroom = e.detail
				this.checkNull()
			},
			changeTeacher(e) {
				this.teacher = e.detail
				this.checkNull()
			},
			popWeek() {
				this.showWeek = true
			},
			onCloseWeek() {
				this.showWeek = false
			},
			chooseWeek(e) {
				this.isChecked = e.detail
			},
			changeWeeks(e) {
				this.weeks = e.detail
				// console.log(this.weeks)
				this._weeks = this.weeks.map(Number)
				console.log(this._weeks)
				this.checkNull()
			},
			addClass() {
				let self = this
				var course = {
					"openid": wx.getStorageSync('openid'),
					"courseName": self.courseName,
					"classroom": self.classroom,
					"weeks": self._weeks,
					"day": self.day,
					"jieshu": self.jieshu,
					"teacher": self.teacher
				}
				uni.request({
					url: getApp().globalData.baseURL + "/course/addCourse",
					data: {
						"course": JSON.stringify(course)
					},
					header: {
						"token": wx.getStorageSync('token')
					},
					success: (res) => {
						if (res.data.code == 1) {
							Notify({
								type: 'success',
								message: '添加课程成功!'
							});
							uni.navigateBack()
						} else {
							Notify({
								type: 'warning',
								message: '与现有课程冲突了哦!'
							});
						}
					},
					fail: (err) => {
						Notify({
							type: 'danger',
							message: '导入失败,请检查您的网络连接'
						});
					}
				})
			}
		}
	}
</script>

<style>
	.weekNum {
		margin-top: 50rpx;
		height: 100rpx
	}

	.add {
		margin-top: 200rpx;
		text-align: center;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}
</style>
